<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../plugins/vue.min.js"></script>
    <style>
        .kerwin-enter-active{
            animation: aaa 1.5s;
        }
        .kerwin-leave-active{
            animation: aaa 1.5s reverse;
        }

        @keyframes aaa {
            0%{
                opacity: 0;
                transform: translateX(100px);
            }
            100%{
                opacity: 1;
                transform: translateX(0px);
            }
        }
    </style>
</head>
<body>
    <div id="box">
        <button @click="isShow = !isShow">点击</button>

        <!-- transition只能下面只能出现一个节点,不能出现多个并列的节点 -->
        <transition name="kerwin" mode="out-in">
            <!-- <div v-if="isShow">\\\\\\\\\\\\\\\\</div> -->
            <!-- 这种写法没有动画效果,没有过度   发现是div相同认为是修改,保留节点-->
            <!-- <div v-else>////////////</div> -->


            <!-- 若是下面这种写法,就可以有效果  div跟p不相同,认为发生了特别大的改变,直接删除上面的div创建一个p -->
            <!-- <p v-else> /////////////</p> -->

            <!-- 最终写法 -->
            <div v-if="isShow" key="1">\\\\\\\\\\\\\\\\</div>
            <div v-else key="2">////////////</div>
        </transition>
        
    </div>


    <script>
        let vm = new Vue({
            el:"#box",
            data:{

                // isShow:false
                isShow:true
            }
        })
    </script>
</body>
</html>